
<!DOCTYPE html>
<html lang="zh-cn">
    
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="XGHeaven&#39;s Blog">
    <title>归档: 2017/8 - XGHeaven&#39;s Blog</title>
    <meta name="author" content="XGHeaven">
    
    
    
        <link rel="alternate" type="application/atom+xml" title="RSS" href="/atom.xml">
    
    <meta property="og:type" content="blog">
<meta property="og:title" content="XGHeaven&#39;s Blog">
<meta property="og:url" content="http://blog.xgheaven.cn/archives/2017/08/index.html">
<meta property="og:site_name" content="XGHeaven&#39;s Blog">
<meta property="og:locale" content="zh-cn">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="XGHeaven&#39;s Blog">
<meta name="twitter:creator" content="@XGHeaven">
    
    
        
    
    
        <meta property="og:image" content="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=640"/>
    
    
    
    
    <!--STYLES-->
    <link rel="stylesheet" href="/assets/css/style-mhhgzztqkaub4zd4cl8bd83f7mgh9j6njnhilft4hamhrjsliqyzwo2cfzdk.min.css">
    <!--STYLES END-->
    
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-71388235-1']);
        _gaq.push(['_trackPageview']);
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

    
    <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?9894361f828b64144ac1f2ac0c58c300";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</head>

    <body>
        <div id="blog">
            <!-- Define author's picture -->


    
        
    

<header id="header" data-behavior="1">
    <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
    <h1 class="header-title">
        <a class="header-title-link" href="/ ">XGHeaven&#39;s Blog</a>
    </h1>
    
        
            <a  class="header-right-picture "
                href="#about">
        
        
            <img class="header-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=90"/>
        
        </a>
    
</header>
            <!-- Define author's picture -->


    

<nav id="sidebar" data-behavior="1">
    
        <div class="sidebar-profile">
            <a href="/#about">
                    <img class="sidebar-profile-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=110"/>
            </a>
            <span class="sidebar-profile-name">XGHeaven</span>
        </div>
    
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/ "
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-home"></i>
                    <span class="sidebar-button-desc">首页</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-categories"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
                    <span class="sidebar-button-desc">分类</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-tags"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
                    <span class="sidebar-button-desc">标签</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-archives"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
                    <span class="sidebar-button-desc">归档</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="#about"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-question"></i>
                    <span class="sidebar-button-desc">关于</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/friend-link"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-link"></i>
                    <span class="sidebar-button-desc">友情链接</span>
                </a>
        </li>
        
    </ul>
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://github.com/XGHeaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-github"></i>
                    <span class="sidebar-button-desc">GitHub</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://twitter.com/xgheaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-twitter"></i>
                    <span class="sidebar-button-desc">Twitter</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://facebook.com/xgheaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-facebook"></i>
                    <span class="sidebar-button-desc">Facebook</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://www.linkedin.com/xgheaven/" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-linkedin"></i>
                    <span class="sidebar-button-desc">LinkedIn</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="mailto:xgheaven@gmail.com" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-envelope-o"></i>
                    <span class="sidebar-button-desc">邮箱</span>
                </a>
        </li>
        
    </ul>
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/atom.xml"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
                    <span class="sidebar-button-desc">RSS</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/changelog"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-line-chart"></i>
                    <span class="sidebar-button-desc">Changelog</span>
                </a>
        </li>
        
    </ul>
    
</nav>

            
            <div id="main" data-behavior="1"
                 class="
                        hasCoverMetaIn
                        ">
                
    

<section class="postShorten-group main-content-wrap">
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/08/17/vue-lever-a-plugin-help-you-to-manager-true-false-state/">
                            Vue-Lever 一个使用装饰器模式的插件帮你管理 True/false 状态
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Thu Aug 17 2017 11:01:14 GMT+0800">
	
		    8月 17, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Vue-js/">Vue.js</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <blockquote>
<p>vue-lever 是一个使用装饰器模式的插件来帮你管理 true/false 状态</p>
</blockquote>
<p>最近一直在写 vue 相关的东西，因为毕竟是前端，所以经常会遇到一种情况就是说，我需要维护一个 true/false 状态，比如说：当按钮点击的时候，显示加载字样，然后等加载完毕之后完成显示。</p>
<p>首先我们考虑出现这种情况的时候，如果我们一行一行的书写，那将是非常麻烦的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">    data() &#123;</div><div class="line">        <span class="keyword">return</span> &#123; <span class="attr">loading</span>: <span class="literal">false</span> &#125;</div><div class="line">    &#125;</div><div class="line">    methods: &#123;</div><div class="line">        asyncAction() &#123;</div><div class="line">            <span class="keyword">this</span>.loading = <span class="literal">true</span></div><div class="line">            <span class="keyword">this</span>.$http.doing() <span class="comment">// return a promise</span></div><div class="line">                .then(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.loading = <span class="literal">false</span>)</div><div class="line">                .catch(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.loading = <span class="literal">false</span>))</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>我们需要在每一个退出的情况下将 loading 状态设置为 false，这至少意味着你要写 3 遍，非常冗余。而且很容易忘记。</p>
<p>我们可以抽象出来，可以发现每当这种函数运行的时候，首先将相关的变量设置成 true，然后等待异步操作完成或者失败之后，再将变量设置回之前的值。</p>
<p>完成这个操作最简单的方式就是代理，在用户的函数调用之前设置相应的变量，在用户的函数调用完成之后，或者如果函数是异步操作，那么通过返回一个 promise 来表示异步操作。</p>
<p>既然讲到了代理模式，那么在 JS 中有很多，不过我们在这里通过一个 ES6 的新语法，装饰器。</p>
<p>话不多说，上代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Lever <span class="keyword">from</span> <span class="string">'vue-lever'</span></div><div class="line"><span class="comment">// import others</span></div><div class="line"></div><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">    methods: &#123;</div><div class="line">        @Lever.Lever(<span class="string">'loading'</span>)</div><div class="line">        asyncAction() &#123;</div><div class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.$http.doing() <span class="comment">// return a promise</span></div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>这个功能和上面的那段代码是一模一样的，是不是感觉用了装饰器之后就变得特别简单了呢？</p>
<p>不过这里有一点需要注意的是，为了方便和隔离，我将所有的变量全都放在 <code>levers</code> 这个变量下面，也就是说你需要通过 <code>levers.loading</code> 来使用，而不是 <code>loading</code></p>
<p>不过现在暂时没有支持回调函数的方式，也就是你必须要返回一个 promise，否则是不行的。</p>
<p>其次我们这里还有手动模式，也就是如果你不想用装饰器的话，你可以通过 <code>this.$lever(name, value)</code>，来更改状态，其中 <code>name</code> 为变量名，<code>value</code> 为 true/false 值。当然这里也提供两个 alias，<code>this.$lever.t(name)</code> 和 <code>this.$lever.f(name)</code>。方便设置变量为 true/false。</p>
<p>还有一些其他的参数，大家可以去 <a href="https://github.com/XGHeaven/vue-lever" target="_blank" rel="external">Github</a> 网站查看。这篇文章就写到这里。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/08/17/vue-lever-a-plugin-help-you-to-manager-true-false-state/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/08/12/a-new-v8-is-coming-node-js-performance-is-changeing/">
                            A New V8 Is Coming node.js Performance Is Changeing
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Sat Aug 12 2017 15:07:22 GMT+0800">
	
		    8月 12, 2017
    	
    </time>
    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    
                    
                        

                    
                    
                        <p>
                            <a href="/2017/08/12/a-new-v8-is-coming-node-js-performance-is-changeing/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    <div class="pagination-bar">
    <ul class="pagination">
        
        
        <li class="pagination-number">第 1 页 共 1 页</li>
    </ul>
</div>

</section>



                <footer id="footer" class="main-content-wrap">
    <span class="copyrights">
        Copyrights &copy; 2018 XGHeaven. All Rights Reserved.
    </span>
</footer>

            </div>
            
        </div>
        


    

<div id="about">
    <div id="about-card">
        <div id="about-btn-close">
            <i class="fa fa-remove"></i>
        </div>
        
            <img id="about-card-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=110"/>
        
            <h4 id="about-card-name">XGHeaven</h4>
        
            <h5 id="about-card-bio"><p>一个弱弱的码农</p>
</h5>
        
        
            <h5 id="about-card-job">
                <i class="fa fa-briefcase"></i>
                <br/>
                <p>杭州电子科技大学学生一枚</p>

            </h5>
        
        
            <h5 id="about-card-location">
                <i class="fa fa-map-marker"></i>
                <br/>
                Weifang Shandong, China
            </h5>
        
    </div>
</div>

        
<div id="cover" style="background-image:url('/static/images/20170217-TombRaider.jpg');"></div>
    </body>
    <!--SCRIPTS-->
<script src="/assets/js/scrip-z6xcdnzggiy56kzp83ux5nnbwra1acrauxruz3kdi3u5xladb6jh4n3ylebm.min.js"></script>
<!--SCRIPTS END-->



</html>
